The Roadmap: Module 02

Build a mental model
for React architecture.

This guide is designed to answer your questions before you ask them.
Click the "Common Confusion" tags to see deep dives.

Components & JSX

A Component is just a JavaScript function that returns a UI blueprint (JSX).

Header.jsx (The Definition)

export default function Header() {
    return <h1>Welcome to React</h1>;
}

App.jsx (The Call)

import Header from './Header';
                                        
function App() {
    return (
        <div>
        <Header /> 
        </div>
    );
}

Browser Preview

Welcome to React

Common Confusion: Why JSX?

"Doesn't JS usually hate HTML tags?" Yes. Browser engines can't read JSX. React tools (like Babel) compile that JSX into React.createElement() calls. It's essentially "Syntactic Sugar" for a bunch of JS objects.

Props & Destructuring

Props allow parent components to share data with children. Destructuring is the professional standard for keeping your code clean.

💡

Why Destructure? It defines the component's "API" at the top level. You see exactly what data is needed without hunting through the code for props.something.

The Old Way

function Card(props) {
    return <h1>{props.title}</h1>;
}

Passes everything as one object. You must use props. to access any value inside.

The Clean Way

function Card({ title }) {
    return <h1>{title}</h1>;
}

Unpacks the specific data you need immediately. No more typing props. over and over.

Implementation

App.jsx (The Sender)

function App() {
    return <Profile name="Alex" role="Dev" />;
}

Profile.jsx (The Receiver)

function Profile({ name, role }) {
return (
    <div>
    <h3>{name}</h3>
    <p>{role}</p>
    </div>
);
}

Live Result

👤

User: Alex

Role: Dev

How React Actually Renders

🍽️The Restaurant Analogy

Think of React like a Kitchen: Trigger is the customer placing an order. Render is the chef preparing the food in the kitchen (hidden). Commit is the waiter placing the finished plate on your table (visible).

Step 1

Trigger

setCount(1)

The order is placed. React marks the component as "dirty" and schedules the update.

Step 2

Render (Math)

New JSX vs Old JSX

The chef calculates the difference. "The old button was red, the new one is blue." No screen change yet.

Step 3

Commit

DOM.update()

The waiter brings the plate. React applies the minimal changes to the real browser DOM.

🤔 Wait, doesn't re-rendering make the app slow? Click to see why not

Common mistake: Thinking a "Render" is a "Paint".

• Rendering: Internal JS calculation (extremely fast).
• Painting: Physical update to the screen (slow).

React is fast because it can perform thousands of renders but only triggers 1 efficient paint.

Still a bit unclear? Don't worry! In the next module when we cover useState(), everything will become crystalclear.

Dynamic Data

In React, we don't manually repeat HTML tags for every piece of data. Instead, we use the .map() method to loop through an array and automatically generate a list of components based on your data.

App.jsx (Logic)

const fruits = [
    { id: 1, name: "🍎 Apple" },
    { id: 2, name: "🍌 Banana" }
]

function App() {
    
    return (
        <ul>
            {fruits.map((fruit) => (
            <li key={fruit.id} className="fruit-item">
                {fruit.name}
            </li>
            ))}
        </ul>
    )
}

React uses .map() to transform your data array into visual JSX elements.

Live Result

1 🍎 Apple
2 🍌 Banana

🔑

They "Key" Rule

Always provide a unique key (like an ID) to each list item. This helps React's "diffing" algorithm know exactly which item changed, moved, or was deleted.

Structure & Strict Mode

1. Fragments vs Div Soup

Div Mode Toggle Architecture

<div> <!-- Extra tag! -->
    <h1>Hello World</h1>
</div>

DOM has extra <div> node

<> <!-- Invisible tag -->
    <h1>Hello World</h1>
</>

Clean DOM. Zero extra nodes.

Why it matters: Using extra <div> tags for grouping can break CSS layouts (like Flexbox and Grid) and clutter the browser inspector.

The Solution: Fragments let you group items without adding any real HTML tags to the final page.

3. Class vs ClassName

❌ HTML Way

<div class="container">...</div>

✅ React Way

<div className="container">...</div>

Why? "class" is a reserved keyword in JavaScript. React uses className to avoid conflicts.

2. Strict Mode Lifecycle

main.jsx (Entry File)

import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(root).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

Browser Console

> Component Rendered

> Component Rendered (Strict Mode check)

Dev Tip: This double-render ONLY happens in development. It helps catch "side effect" bugs early by running your logic twice to ensure it's predictable and pure.

Are you ready for State & Effects?

If you understand that React is just a transformation engine that takes Data (Props) and turns it into Blueprints (JSX) efficiently, you are 90% there.

Components are functions

JSX is JS Objects

Keys are unique

Build a mental model for React architecture.